<template>
  <div class="first patientReportForm patientReport">
    <amsp-card title="图文报告" v-loading="loading" class="innerBox">
      <el-form :model="form" ref="form" :rules="RULES" label-width="120px" label-position="left">
        <div class="inner-content">
          <div class="infoBox">
            <el-row>
              <el-col :span="8">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="form.name" readonly placeholder="请输入姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="1">
                <el-form-item label="医院" prop="hospital">
                  <el-input v-model.trim="form.hospital" placeholder="请输入医院"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="form.age" readonly placeholder="请输入年龄"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="1">
                <el-form-item label="身高(cm)" prop="height">
                  <el-input v-model.trim="form.height" placeholder="请输入身高"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="重建工程师" prop="buildName">
                  <el-input v-model.trim="form.buildName" placeholder="请输入重建工程师姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="1">
                <el-form-item label="临床诊断" prop="diagnose">
                  <el-input v-model.trim="form.diagnose" placeholder="请输入临床诊断"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="模型图片" prop="modeImage">
                  <el-button class="btn-forUpload" type="text" @click="upLoadImage1(1)">上传图片</el-button>
                  <img class="outerImg" :src="modeImage_url" alt=""><span>{{form.modelImage}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="1">
                <el-form-item label="2D,3D影像比对" prop="screenageImage">
                  <el-button class="btn-forUpload" type="text" @click="upLoadImage1(2)">上传图片</el-button>
                  <img class="outerImg" :src="screenageImage1_url" alt="">
                  <img class="outerImg" :src="screenageImage2_url" alt="">
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <p class="line1"></p>
          <div class="infoBox">
            <el-row>
              <el-col :span="8">
                <el-form-item label="标题一" prop="title1">
                  <el-input v-model.trim="form.title1" placeholder="请输入标题"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="15" :offset="1">
                <el-form-item label="图片集一" prop="image">
                  <el-button class="btn-forUpload" type="text" @click="upLoadImage1(3)">上传图片</el-button>
                  <img :src="leftImage1_url" class="outerImg" alt="">
                  <img :src="rightImage1_url" class="outerImg" alt="" style="margin-left: 10px;">
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="17">
                <el-form-item label="描述一" prop="describe1">
                  <el-input type="textarea" v-model.trim="form.describe1" rows="5" placeholder="请输入描述信息"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <p class="line1"></p>
            <el-row>
              <el-col :span="8">
                <el-form-item label="标题二" prop="title2">
                  <el-input v-model.trim="form.title2" placeholder="请输入标题"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="15" :offset="1">
                <el-form-item label="图片集二" prop="image">
                  <el-button type="text" class="btn-forUpload" @click="upLoadImage1(4)">上传图片</el-button>
                  <img :src="leftImage2_url" class="outerImg" alt="">
                  <img :src="rightImage2_url" class="outerImg" alt="" style="margin-left: 10px;">
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="17">
                <el-form-item label="描述二" prop="describe2">
                  <el-input v-model.trim="form.describe2" type="textarea" rows="5" placeholder="请输入描述信息"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <p class="line1"></p>
            <el-row>
              <el-col :span="8">
                <el-form-item label="标题三" prop="title3">
                  <el-input v-model.trim="form.title3" placeholder="请输入标题"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="15" :offset="1">
                <el-form-item label="图片集三" prop="image">
                  <el-button type="text" class="btn-forUpload" @click="upLoadImage1(5)">上传图片</el-button>
                  <img :src="leftImage3_url" class="outerImg" alt="">
                  <img :src="rightImage3_url" class="outerImg" alt="" style="margin-left: 10px;">
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="17">
                <el-form-item label="描述三" prop="describe3">
                  <el-input v-model.trim="form.describe3" type="textarea" rows="5" placeholder="请输入描述信息"></el-input>
                </el-form-item>
              </el-col>

            </el-row>


          </div>
        </div>
<!-- 
        <div class="FormBox">
          <div class="btns">
            <el-button class="nextBtn" type="primary" @click="submitForm" :disabled="loading">确定</el-button>
         
            <el-button class="noBtn" color="gray" line @click="$router.go(-1)">取消</el-button>
          </div>
        </div> -->

      </el-form>

    </amsp-card>

    <div class="baseFormBtns" id="baseFormBtns">
      <el-button round @click="$router.go(-1)">取消</el-button>
      <el-button round type="primary" @click="submitForm" :disabled="loading">确定</el-button>
    </div>

    <amsp-pop class="addEditMedicalRecord" ref="choosePatientPics"  :title="pop.pop1.title" width="700px" :visible.sync="pop.pop1.flag" :before-close="closeAddEdit">
      <div class="addEditForm">
        <span>选中的图片:</span>
        <div v-for="(item,index) in selectedList" :key="index" class="sel-imgs">
          <span>{{item.name.substring(0,item.name.lastIndexOf("."))}}</span>
        </div>
        <div class="imgList">
          <ul>
            <li v-for="(item,index) in imageList" :key="index">
              <a @click="getSelectedImgs(item,index)" ref="link_img" :class="selectedList.some(a =>{if(item.name == a.name){return true}else{return false}}) ? 'selActive':''">
                <img :src="item.url" alt="">
                <div>{{item.name.substring(0,item.name.lastIndexOf("."))}}</div>
              </a>
            </li>
          </ul>
        </div>
        <div class="baseFormBtns" id="baseFormBtns">
          <el-button  @click="closeAddEdit">取消</el-button>
          <el-button  type="primary" @click="btnSure">确定</el-button>
        </div>
      </div>
    </amsp-pop>
  </div>
  
</template>

<script>
  import {queryPatientOne} from '@/depends/api/patient'
  import {queryScreenshots,createQraphicReport} from '@/depends/api/file'
  import {mapGetters} from 'vuex'
  import {KEYS} from "../medicalRecordManage/component/keys";
  export default {
    data() {
      return {
        userInfo:{},
        Id:'',
        patientId:'',
        urlPrefix:window.SITE_CONFIG['apiURL']+'/temr/file/filterSkip/downloadFile/',
        form: {
          name:'',
          hospital:'',
          age:'',
          height:'',
          buildName:'',
          diagnose:'',
          qrcode:'',
          modeImage:'',
          modelColor:'',
          title1:'',
          leftImage1:'',
          rightImage1:'',
          describe1:'',
          title2:'',
          leftImage2:'',
          rightImage2:'',
          describe2:'',
          title3:'',
          leftImage3:'',
          rightImage3:'',
          describe3:'',
          screenageImage1:'',
          screenageImage2:''

        },
        modeImage_url:'',
        screenageImage1_url:'',
        screenageImage2_url:'',
        leftImage1_url:'',
        leftImage2_url:'',
        leftImage3_url:'',
        rightImage1_url:'',
        rightImage2_url:'',
        rightImage3_url:'',
        RULES:{
          'name':[{ required: true, message: '请输入患者姓名', trigger: 'blur' }],
         /* 'age':[{ required: true, message: '请输入患者年龄', trigger: 'blur' }],
          'height':[{ required: true, message: '请输入患者身高', trigger: 'blur' }],*/
          'hospital':[{ required: true, message: '请输入医院名称', trigger: 'blur' }],
          /*'buildName':[{ required: true, message: '请输入重建医生姓名', trigger: 'blur' }],
          'diagnose':[{ required: true, message: '请输入诊断信息', trigger: 'blur' }],*/
        },
        pop: {
          pop1: {
            flag: false,
            title: '患者影像信息',

          }
        },
        currentImgType:-1, //图片类型 模型:1,ct2:2
        activeIndex:-1,
        selectedList:[], // 当前选中的图片列表
        imageList:[{url:'',name:'0',urlPrefix:''}
        ,{url:'',name:'1',urlPrefix:''}
        ,{url:'',name:'2',urlPrefix:''}
        ,{url:'',name:'3',urlPrefix:''}
        ,{url:'',name:'4',urlPrefix:''}
        ,{url:'',name:'5',urlPrefix:''}
        ,{url:'',name:'6',urlPrefix:''}
        ,{url:'',name:'7',urlPrefix:''}],
        fileList: [],
       /* RULES: RULES,*/
        arr:[],
        loading:false
      };
    },
    computed:{
      ...mapGetters('user', ['getUserInfo']),
      selectedClass(){
      }
    },
    mounted() {
      if(this.$route.query.id !=null){
        this.Id = this.$route.query.id;
        this.patientId = this.$route.query.patientId;
        this.form.hospital = this.$route.query.hospitalName;
      }
      //设置医院默认值
      this.userInfo = this.getUserInfo;
     // this.form.hospital = this.userInfo.hospital;
      //查询用户姓名和年龄
      this.queryPatientOne();
      this.urlPrefix=window.SITE_CONFIG['apiURL']+'/temr/file/filterSkip/downloadFile/';
    },
    methods: {
      queryPatientOne () {
        queryPatientOne({id: this.patientId }).then(res => {
          if (res.data.status != 200) { return }
          this.form.age = res.data.data.age;
          this.form.name = res.data.data.name;
        })
      },
      upLoadImage1(type){
        this.currentImgType = type;
        this.selectedList=[];
        this.activeIndex = -1;
        let postType = -1;
        if(type !==2){
          postType = 0;
        }else{
          postType=1;
        }
        queryScreenshots({id: this.Id,type:postType}).then(res => {
          if (res.data.status != 200) { return }
          this.imageList = this.getFormatImgList(res.data.data);
          if(this.imageList.length > 0){
            this.pop.pop1.flag = true;
          }else{
            this.$message({
              type: "error",
              message: "未上传截图",
            });
          }

        })
      },
      getFormatImgList(imgArr){
        let retArr=[];
        if(imgArr!=null){
          for(let i=0;i<imgArr.length;i++){
            retArr.push({name:imgArr[i],url:this.urlPrefix+imgArr[i]});
          }
        }
        return retArr;
      },
      getSelectedImgs(item,index){
        this.activeIndex = index;
        if(!this.judgeRepeat(item)){
          if(this.currentImgType == 1){
            this.selectedList=[];
            this.selectedList.push(item);
          }else{ //2张图片的
            if(this.selectedList.length >=2){
              this.selectedList.push(item);
              let temp = this.selectedList.reverse();
              temp.pop();
              this.selectedList = temp.reverse();
            }else{
              this.selectedList.push(item);
            }
          }
        }

      },
      btnSure(){
        this.initFormPics();
        this.pop.pop1.flag = false;
      },
      initFormPics(){
        if(this.currentImgType ===1){ //模型图片
          if(this.selectedList.length > 0){
            this.form.modeImage = this.selectedList[0].name;
            this.modeImage_url = this.selectedList[0].url;
          }
        }else if(this.currentImgType ===2){ //ct对比图
          /*if(this.selectedList.length > 0){
            this.form.screenageImage = this.selectedList[0].name;
            this.screenageImage_url = this.selectedList[0].url;
          }*/
          if(this.selectedList.length >=2){
            this.form.screenageImage1 = this.selectedList[0].name;
            this.screenageImage1_url = this.selectedList[0].url;
            this.form.screenageImage2 = this.selectedList[1].name;
            this.screenageImage2_url = this.selectedList[1].url;

          }else{
            if(this.selectedList.length > 0){
              this.form.screenageImage1 = this.selectedList[0].name;
              this.screenageImage1_url = this.selectedList[0].url;
              this.form.screenageImage2 = '';
              this.screenageImage2_url = '';
            }else{
              this.form.screenageImage1 = '';
              this.screenageImage1_url = '';
              this.form.screenageImage2 = '';
              this.screenageImage2_url = '';
            }
          }

        }else if(this.currentImgType ===3){ //图集1
          if(this.selectedList.length >=2){
            this.form.leftImage1 = this.selectedList[0].name;
            this.leftImage1_url = this.selectedList[0].url;
            this.form.rightImage1 = this.selectedList[1].name;
            this.rightImage1_url = this.selectedList[1].url;

          }else{
            if(this.selectedList.length > 0){
              this.form.leftImage1 = this.selectedList[0].name;
              this.leftImage1_url = this.selectedList[0].url;
              this.form.rightImage1 = '';
              this.rightImage1_url = '';
            }else{
              this.form.leftImage1='';
              this.leftImage1_url='';
              this.form.rightImage1='';
              this.rightImage1_url='';
            }
          }
        }else if(this.currentImgType ===4){ //图集2
          if(this.selectedList.length >=2){
            this.form.leftImage2 = this.selectedList[0].name;
            this.leftImage2_url = this.selectedList[0].url;
            this.form.rightImage2 = this.selectedList[1].name;
            this.rightImage2_url = this.selectedList[1].url;
          }else{
            if(this.selectedList.length > 0){
              this.form.leftImage2 = this.selectedList[0].name;
              this.leftImage2_url = this.selectedList[0].url;
              this.form.rightImage2 = '';
              this.rightImage2_url = '';
            }else{
              this.form.leftImage2 ='';
              this.leftImage2_url ='';
              this.form.rightImage2 ='';
              this.rightImage2_url ='';
            }
          }
        }else if(this.currentImgType ===5){ // 图集3
          if(this.selectedList.length >=2){
            this.form.leftImage3 = this.selectedList[0].name;
            this.leftImage3_url = this.selectedList[0].url;
            this.form.rightImage3 = this.selectedList[1].name;
            this.rightImage3_url = this.selectedList[1].url;
          }else{
            if(this.selectedList.length > 0){
              this.form.leftImage3 = this.selectedList[0].name;
              this.leftImage3_url = this.selectedList[0].url;
              this.form.rightImage3 = '';
              this.rightImage3_url = '';
            }else{
              this.form.leftImage3 ='';
              this.leftImage3_url ='';
              this.form.rightImage3 ='';
              this.rightImage3_url ='';
            }
          }
        }
      },
      judgeRepeat(item){
        let flag= false;
        this.selectedList.forEach(function(element){
          if(item.name === element.name){
            flag = true;
          }
        })
        return flag;
      },
      closeAddEdit () {
        this.currentImgType = -1;
        this.selectedList=[];
        this.pop.pop1.flag = false
      },
      isPass(form) {
        return new Promise((reslove, reject) => {
          this.$refs[form].validate((valid) => {
            reslove(valid);
          });
        });
      },
      submitForm() {
        let lin = { ...this.form,id:this.Id};
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.loading = true;
            createQraphicReport(lin).then((res) => {
              if (res.status === 200) {
                this.loading = false;
                this.$message({
                  type: "success",
                  message: "数据提交成功",
                });
                this.$router.back();
              }
            }).catch(() => {
              this.loading = false;
            });
          }
        })


      },
      updateText_1(event,b){
        this.$set(this.form.basicAddInformation[b],'name',event);
        this.$forceUpdate();
      },
      updateText_2(event,b){
        this.$set(this.form.basicAddInformation[b],'value',event);
        this.$forceUpdate();
      }
    }


  }
</script>

<style lang="less">
  .patientReportForm.first {
    flex: 1;
    display: flex;
    flex-direction: column;
    .innerBox {
      flex: 1;
      overflow: hidden;
    }
    .baseFormBtns {
      height: 50px;
      padding-left: 20px;
      padding-right: 10px;
      background-color: #ffffff;
      box-shadow: 0px 2px 8px 0px rgb(215 215 215 / 60%);
      border-radius: 6px 6px 0px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    textarea.el-textarea__inner {
      background-color: #fff;
    }
    .selectrow .el-select,.selectrow .el-cascader {
      display: block;
    }
    .upload-title {
      color: #666666;
    }
    .line1 {
      border-bottom: 1px solid #e5e5e5;
      width: 100%;
      margin-bottom: 15px;
    }
    .line2 {
      border-bottom: 10px solid #fff;
      width: 100%;
    }
    .basicAddIn {
      margin-top: 6px;
      &:first-child {
        margin-top: 0;
      }
      .delbtn {
        font-size: 12px;
        cursor: pointer;
        color: #B7B7B7;
        background-color: #EBEDF0;
        border: 1px solid #B7B7B7;
        width: 22px;
        height: 22px;
        text-align: center;
        line-height: 21px;
        margin-left: 4px;
        display: inline-block;
        border-radius: 50px;
      }
      .text_textarea {
        margin-top: 10px;
      }
      .name {
        width: 187px;
        margin-right: 2px;
      }
      .unit {
        width: 107px;
        margin-right: 2px;
      }
      .expression {
        width: 97px;
        margin-right: 2px;
      }
      .range {
        background-color: #fff;
        border-radius: 4px;
        border:1px solid #e5e5e5;
        display: inline-block;
      }
      .dataOne-Two {
        width: 90px;
        margin-right: 2px;
        input {
          border:none;
        }
      }
    }
    .newAddFn {
      cursor: pointer;
      color: #ffb700;
      font-size: 12px;
      .iconfont {
        font-size: 14px;
        margin-right: 4px;
      }
    }
  }
  .inner-content{
    // max-height:650px;
    overflow-y:auto;
  }
</style>
<style lang="less" scoped="scoped">
  .patientReport {
    margin:0 16px;
    height: 100%;
    padding-top: 16px;
   /* overflow-y:auto;*/
    box-sizing: border-box;
    .eventStep {
      width: 820px;
      height: 78px;
      padding: 24px 0;
      margin: 0 auto;
      .stepBox {
        cursor: pointer;
      }
      .icon-chenggong {
        margin-right: 5px;
      }
      .stepNum {
        width: 30px;
        height: 30px;
        line-height: 28px;
        vertical-align: middle;
        text-align: center;
        border: 1px solid #ababab;
        border-radius: 50%;
        margin-right: 5px;
        display: inline-block;
      }
      .stepName {
        line-height: 30px;
        display: inline-block;
        vertical-align: middle;
      }

    }
    .FormBox {
      margin: 0 18px;
      height: calc(100% - 78px);
      overflow: hidden;
      .btns {
        height: 64px;
        background-color: #fff;
        margin-top: 13px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        .nextBtn {
          background-color: #ffb700;
          color: #fff;
        }
        .noBtn {
          border-color: #ffb700;
          color: #222222;
        }
      }
    }
    img.outerImg{
      width:90px;
      height:90px;
      padding:4px;
    }
    .btn-forUpload{
      // position:relative;
      // bottom:70px;
      vertical-align: top;
    }
    .addEditMedicalRecord {
      .addEditForm {
        max-height: 650px;
        overflow-y: auto;
        overflow-x: hidden;
      }
      #baseFormBtns.baseFormBtns {
        position: initial;
        width:180px;
        margin:10px auto;

      }


    }
  }
  .imgList{
    padding:0;
    margin:0;
    overflow:hidden;
  }
  .imgList ul {
    padding: 0 0 15px;
    margin:15px 0;
    list-style:none;
    width:100%;
    overflow:hidden;

  }
  .imgList ul li{
    padding:24px 8px ;
    margin:0;
    width:25%;
    float:left;
  }
  .imgList ul li div{
    padding:6px 0;
    text-align:center;
  }
  .imgList ul li a{
    width:100%;
    height:150px;
    float:left;
    cursor:pointer;
    border:1px solid #ddd;
  }
  .imgList img{
    display:block;
    width:100%;
    height:100%;
  }
  .imgList ul li a.selActive{
    border:2px solid #3399ff ! important;
  }
  .sel-imgs{
    padding:4px 0;
    color:#3399ff;
  }
  .addEditForm > span{
    display:inline-block;
    margin-bottom:2px;
  }
</style>